<template>
  <div class="navmenu" id="navmenu">
    <div class="left">
      <SettingsOptions />
    </div>
    <div class="right">
      <el-menu class="navmenu-item" :default-active="$route.path" mode="horizontal" @select="handleSelect" @open="handleOpen" @close="handleClose" text-color="#000" router menu-trigger="click">
        <el-menu-item index="home">首页</el-menu-item>
        <el-menu-item index="conversation-item" :title="isLogin? '' : '请先登录'" :disabled="!isLogin">会话</el-menu-item>
        <el-menu-item index="group-videocall-item" v-if="isGroupVideoCallVisible" >群[{{ currentConversation.groupProfile.name }}]视频通话</el-menu-item>
        <el-menu-item index="avchatroom-item">音视频聊天室</el-menu-item>
        <el-menu-item index="todo-list" :title="isTcbLogin? '' : '请先登录'" :disabled="!isTcbLogin">云待办</el-menu-item>
        <el-submenu index="3">
          <template slot="title">小实践</template>
          <el-menu-item index="waterfall">
            瀑布流
            <i :title="waterfallTitle" class="el-icon-warning-outline" style="color:#000"></i>
          </el-menu-item>
          <el-submenu index="3-1">
            <template slot="title">CSS动画特效</template>
            <el-menu-item index="eclipse">日环食</el-menu-item>
            <el-menu-item index="css-button">CSS特效按钮</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import SettingsOptions from './../../components/settings/SettingsOptions.vue';

export default {
  name: 'NavMenu',
  data () {
    return {
      waterfallTitle: '模拟瀑布流布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，包含防抖功能，500毫秒内只能请求一次'
    }
  },
  components:{
    SettingsOptions
  },
  computed:{
    ...mapState({
      isLogin: state => state.user.isLogin,
      isTcbLogin: state => state.todo.isTcbLogin,
      currentConversation: state => state.conversation.currentConversation
    }),
    isGroupVideoCallVisible(){
      // 当前会话类型是群组，并且可以获取到群资料自定义字段trtc_roomid，展示群视频通话选项
      if(this.currentConversation.type === this.TIM.TYPES.CONV_GROUP && this.currentConversation.groupProfile){
        // 找到自定义字段trtc_roomid，当value不为空时，展示
        let trtcRoomId = this.currentConversation.groupProfile.groupCustomField.find((obj) => {
          return obj.key === 'trtc_roomid';
        });
        if(trtcRoomId.value){
          return true;
        }
      }
      return false;
    }
  },
  mounted() {
    this.initNav();
  },
  methods: {
    initNav() {
      document.getElementById("navmenu").style.backgroundColor = "rgba(255, 255, 255, .2)";
      document.getElementById("navmenu").onmouseover = function () {
        this.style.backgroundColor = "#fff";
      }
      document.getElementById("navmenu").onmouseout = function(){
        this.style.backgroundColor = "rgba(255, 255, 255, .2)";
      }
    },
    handleSelect(key) {
      // 菜单栏选择事件，选择子菜单后触发，初始化菜单栏
      this.initNav();
      switch(key){
        case 'conversation-item':
          this.$store.commit('resetCurrentConversation');
          break;
        case 'avchatroom-item':
          // 点击音视频聊天室后，加入群avchatroom
          this.$store.dispatch('joinGroup',{ groupID : 'avchatroom' });
          break;
      }
    },
    handleOpen() {// 传参key, keyPath
      // 菜单栏打开事件，打开后设置菜单栏为白色
      document.getElementById("navmenu").style.backgroundColor = "#fff";
      document.getElementById("navmenu").onmouseover = function (){}
      document.getElementById("navmenu").onmouseout = function(){}
    },
    handleClose(key) {
      // 菜单栏关闭事件，当一级子菜单被关闭时，初始化菜单栏
      if (!isNaN(key)) {
        this.initNav();
      }
    }
  }
  
}
</script>

<style scoped>
.navmenu{
  position:fixed;
  width: 100%;
  background-color: rgba(255, 255, 255, .2);
}
.left{
  position:absolute;
  left: 0;
  padding: 10px;
}
.right{
  float: right;
  margin-left: 60px;
  height: 60px;
  overflow: hidden;
}
.navmenu-item{
  border:none;
  background-color: rgba(255,255,255,0);
}
/* .el-menu--horizontal>.el-menu-item.is-active,选中的背景颜色对应class */
.el-menu.el-menu--horizontal{
  border:none;
}
.el-menu--horizontal>.el-menu-item:focus,.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover{
  /* 避免因选中后返回有选中背景色的bug */
  background-color:rgba(255,255,255,0);
}
.navmenu:hover{
  background-color: #fff;
}
.navmenu:link{
  background-color: rgba(255,255,255,0);
}
</style>
